<template>
    <div class="pagesize">
        <ul>
            <li :class="page==1?'disable':''" @click="prev">上一页</li>
            <li @click="toFirst">首页</li>
            <li v-for="item in list" :class="[item==page?'active':'']" @click="handleClick">
                {{ item }}
            </li>
            <li @click="toEnd">尾页</li>
            <li :class="page==totalCount?'disable':''" @click="next">下一页</li>
            <li>总共{{ totalCount }}页</li>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        total: {
            type: [Number, String],
            default: 0
        },
        pagesize: {
            type: [Number, String],
            default: 1
        },
        page: {
            type: [Number, String],
            default: 1
        }
    },
    data() {
        return {
            totalCount: 0      //总页数
        }
    },
    computed: {
        list() {
            let list = [];
            //计算总页数
            this.totalCount = Math.ceil(this.total / this.pagesize);

            //超限控制
            if (this.page <= 0) {
                let {count, total} = this;
                this.$emit('pagechange', {page: 1, count, total});
            }
            if (this.page > this.totalCount) {
                let {count, total} = this;
                this.$emit('pagechange', {page: this.totalCount, count, total});
            }

            //计算显示页码
            if (this.totalCount > 5) {
                if (this.page > 2 && this.page < this.totalCount - 2) {
                    list = [this.page - 2, this.page - 1, this.page, this.page + 1, this.page + 2];
                } else if (this.page <= 2 && this.page > 0) {
                    for (let i = 1; i <= 5; i++) {
                        list.push(i);
                    }
                } else if (this.page >= this.totalCount - 2 && this.page <= this.totalCount) {
                    for (let i = 4; i >= 0; i--) {
                        list.push(this.totalCount - i);
                    }
                }
            } else {
                for (let i = 1; i <= this.totalCount; i++) {
                    list.push(i);
                }
            }
            return list;
        }
    },

    methods: {
        //页码点击事件
        handleClick(e) {
            let page = parseInt(e.target.innerText);
            let {count, total} = this;
            this.$emit('func', {page, count, total});
        },
        //前一页
        prev(e) {
            if (!e.target.classList.contains['disable']) {
                console.log(this.page)
                if ( this.page > 1 ) {
                    let {page, count, total} = this;
                    this.$emit('func', {page: this.page - 1, count, total});
                }
            }
        },
        //下一页
        next(e) {
            if (!e.target.classList.contains['disable']) {
                console.log(this.page)
                if (this.page < this.totalCount) {
                    let {page, pagesize, total} = this;
                    this.$emit('func', {page: this.page + 1, pagesize, total});
                }
            }
        },
        //首页
        toFirst() {
            let {page, pagesize, total} = this;
            this.$emit('func', {page: 1, pagesize, total});
        },
        //尾页
        toEnd() {
            let {page, pagesize, total} = this;
            this.$emit('func', {page: this.totalCount, pagesize, total});
        }
    }
}
</script>
<style scoped>
.pagesize {
    text-align: right;
    padding-right: 20px;
    margin-top: 20px;
}

.pagesize ul {
    list-style: none;
}

.pagesize ul li {
    display: inline-block;
    border: 1px #CCCCCC solid;
    padding: 7px 12px;
    line-height: 1;
    margin-left: -1px;
    cursor: pointer;
}

.active {
    color: white;
    background-color: #f50000;
}

.unactive {
    color: #333333;
    background-color: white;
}

.disable {
    display: none;
}
</style>
